<template>
  <div class="pay">
    <div class="erwei">
      <img :src="imgUrl" alt="">
      <p>微信扫码支付</p>
    </div>
    <el-descriptions border>
      <el-descriptions-item label="创建时间">{{
        OrderInfo.create_time
      }}</el-descriptions-item>
      <el-descriptions-item label="产品名称">{{
        OrderInfo.orderDetail[0].productName
      }}</el-descriptions-item>
      <el-descriptions-item label="商品描述">{{
        OrderInfo.orderDetail[0].description
      }}</el-descriptions-item>
      <el-descriptions-item label="数量">{{
        OrderInfo.orderDetail[0].quantity
      }}</el-descriptions-item>
      <el-descriptions-item label="总价格">{{
        OrderInfo.total_fee
      }}</el-descriptions-item>
      <el-descriptions-item label="居住地" :span="2"
        >苏州市</el-descriptions-item
      >
      <el-descriptions-item label="购买用户">{{
        userInfo.nickname
      }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{
        userInfo.phone
      }}</el-descriptions-item>
      <el-descriptions-item label="订单号">
        {{ goPay.prepay_id }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { mapState } from "vuex";
import * as api from "../../../../api";
import qr from 'qrcode'
export default {
  data() {
    return {
      imgUrl: "", //微信支付的地址
      OrderInfo: {
        orderDetail:[
          {
            productName:'',
            description:"",
            quantity:''
          }
        ]
      }, //订单的状态
      goPay: {}, //去支付
    };
  },
  computed: {
    ...mapState(["order_id", "preChargeOrder", "userInfo"]),
  },
  mounted() {

      

    if (!this.order_id) {
      //如果没有order_id
      this.$alert("订单已取消，请重新提交", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          // 当点击确定的时候，跳转页面到支付页面
          this.$router.push({ name: "preOrder" });
        },
      });
    }
    // 发送并发请求，通过promise.all
    Promise.all([api.getOrderInfo(this.order_id), api.goPay(this.order_id)])
      .then((res) => {
        console.log(res); //会打印出两个返回的结果
        this.OrderInfo = res[0].data.data;
        this.goPay = res[1].data;

          // 地址生成二维码
        qr.toDataURL(res[1].data.code_url, (err, abcurl) => {
          if (err) throw err;
          // console.log(this);
          this.imgUrl = abcurl;
          // console.log(this.imgurl);
        });
      })
      .catch((err) => {
        console.log(err);
      });
      //查询支付状态
      this.queryPayStatus = setInterval(()=>{
        api.checkoutPay(this.order_id)
        .then(res=>{
          console.log(res);
          if(res.data.state){ //如果支付了，就要跳转页面
          // 清楚计时器
          clearInterval(this.queryPayStatus)
            this.$router.push({name:'paySuccess'}) //跳转页面
          }
        })
      },300)
  },
  beforeDestroy(){
    // z组件在销毁之前要卸载计时器
    clearInterval(this.queryPayStatus)
  }
};
</script>

<style scoped>
.pay {
  padding-top: 20px;
}
</style>